<%@page import="java.util.StringTokenizer"%>
<%@page import="com.liferay.portal.service.ListTypeServiceUtil"%>
<%@page import="com.liferay.portal.model.ListType"%>
<%@page import="com.liferay.portal.theme.ThemeDisplay"%>
<%@taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>

<%@ include file="/init.jsp"%>


<portlet:defineObjects />
<portlet:resourceURL var="ajaxCallResourceURL" />

<liferay-ui:error key="application-type-mandatory" message="application-type-mandatory" />

<liferay-portlet:actionURL name="computeChargesCalculator" var="computeChargesCalculator"></liferay-portlet:actionURL>

<script type="text/javascript">
/* function getFees(sSelect){
	
	 var selected = '';
	  for (var i = 0; i < sSelect.options.length; i++){
		  if (sSelect.options[ i ].selected){
			  selected = sSelect.options[ i ].value ; 
			  break;
		  }
	  }
	 // alert(selected);
	  submitTogetFees();
	  
	
} */
function submitTogetFees(){
	document.submitTogetFees_fm.submit();
	
}

 function pickFee(sSelect, k){
	//alert(sSelect);
	var selected = '';
	  for (var i = 0; i < sSelect.options.length; i++){
		  if (sSelect.options[ i ].selected){
			  selected = sSelect.options[ i ].value ; 
			  break;
		  }
	  }
	 // alert(1);
	var fieldName = "result_" + k;
	 document.submitTogetFees_fm[fieldName].value=selected;
	 hidePrintButton();
	computeTotal();
	return selected;
} 
</script>

<portlet:resourceURL var="ajaxCallResourceURL" />

<liferay-portlet:actionURL name="submitTogetFees" var="submitTogetFees"></liferay-portlet:actionURL>

<form  action="<%=submitTogetFees.toString() %>" method="post" name="submitTogetFees_fm">
  <div id="main">
	<h1>CRGIA Online Transaction Calculator</h1>
	<div class="content">
		<p>This calculator is available for your convenience. You assume the risk associated with any use of the calculator 
		and your computer. We do not keep any of the data that you enter. All data stays at your computer.</p>
		<p>This calculator works with the information that you provide. Please make sure that your information is accurate.</p>
		
		<p class="step">STEP 1: Select the type of transaction you want to compute.</p>
		<%
		List<ListType> transactions = ListTypeServiceUtil.getListTypes("com.teqbridgeltd.liferay.model.transactions");
		%>
		<aui:select name="transactions" onChange="submitTogetFees();" label="Select Transaction" inlineLabel="left">
			<aui:option style="font-style: italic; color: #A0A0A4" value="">--Please Select Transaction-- </aui:option>			  
	  	<%
	  	for(int i=0; i<transactions.size(); i++){
	  		ListType _transactions = transactions.get(i);
	  		//403031, 403032, 403033, 403034, 403025
	  	%>	
	  	<aui:option value="<%=_transactions.getName() %>"><%=_transactions.getName()  %> </aui:option>
	  	<%
	  		
	  	}
	  	%>
		</aui:select>		
				
   	<br>
   	
   	<%
   	boolean showSteps = true;
   	
   	%>
   	
   	<div id="divselectedCaption">		
	 		<%
	 		String transaction = (String) request.getAttribute("transactions");
	 		
	 		if(transaction==null || transaction.equals("")){
	 			transaction="CRGIA Online Transaction Calculator";
			}
	 		
	 		if(transaction.equalsIgnoreCase("APPLICATION FOR GOVERNMENT LAND")){
	 			showSteps = true;
	 		}
	 		%>
	  	<label id="selectedCaption"> <%= transaction %> </label>
	  </div>  
	  <%
	  if(showSteps){
	  %>
	  <div id="step-2">
	  <p class="step">STEP 2: Select the zone/layout, enter the area of the property and its unit of measurement.</p>
	  <aui:layout>
			<aui:column columnWidth="33">
				<%
					List<ListType> layoutName = ListTypeServiceUtil.getListTypes("com.teqbridgeltd.liferay.model.layout");
				%>
				<strong>Select Zone/Layout</strong><br>
				<select id="layout_Fixed" name="layout_Fixed" onChange="autoFill()" >
				<option style="font-style: italic; color: #A0A0A4" value="">--Please Select Layout--</option>
		  	
		  	<%
		   
		  	for(int i=0; i<layoutName.size(); i++){
		  		ListType _layoutName = layoutName.get(i);
		  	%>	
		  	<aui:option value="<%=_layoutName.getName() %>"><%=_layoutName.getName()  %></aui:option>
		  	<%
		  	}
		  	%>
			</select>
			</aui:column>
 			<aui:column columnWidth="33">
 			<aui:input name="area_Fixed" id="area_Fixed" label="Area" onChange="autoFill()"></aui:input>
 			</aui:column>
 			
 			<aui:column columnWidth="33">
 			
				<aui:select onChange="autoFill()" style="width:130px"  id="unitOfMeasurement" name="unitOfMeasurement" label="Unit of Measurement">
					<option style="font-style: italic; color: #A0A0A4" value="">--Please Select UOM--</option>  	
				  	<aui:option value="10000" label="hectare"></aui:option>
				  	<aui:option value="2.47105381" label="Acres"></aui:option>
				  	<aui:option value="1" label="Square Metres"></aui:option>
				</aui:select>
				<aui:select onChange="autoFill()" style="width:130px"  id="propertyType_Fixed" name="propertyType_Fixed" label="Property Type">
					<option style="font-style: italic; color: #A0A0A4" value="">--Please Property Type--</option>  	
				  	<aui:option value="Government" label="Government"></aui:option>
				  	<aui:option value="Private" label="Private"></aui:option>
				</aui:select>
 			</aui:column>
 		</aui:layout>
	  
	  </div>
	  <%
	  }
	  %>
	  <div class="calcdivide"></div>
<%--  	  <aui:layout> --%>
<%-- 	  	<aui:column columnWidth="33"> --%>
<!-- 	  		Name of Fees -->
<%-- 	  	</aui:column> --%>
<%-- 	  	<aui:column columnWidth="33"> --%>
<!-- 	  		&nbsp; -->
<%-- 	  	</aui:column> --%>
<%-- 	  	<aui:column columnWidth="33"> --%>
<!-- 	  		Actual Fees (&#8358;) -->
<%-- 	  	</aui:column> --%>
<!-- 	  	<hr> -->
<%-- 	  </aui:layout> --%>
	  	<hr>
			<%			
			//this is coming from the back end
			List<ListType> mappedFees = (List<ListType>)request.getAttribute("mappedFees");
			
			if(null != mappedFees){
				
			for(int k=0; k<mappedFees.size(); k++){
				ListType mappedFee = mappedFees.get(k);
				
				request.setAttribute("mappedFee", mappedFee);
				
				//if(mappedSubFees.size())
			%>
			<jsp:include page="displayFee.jsp"></jsp:include>

			<hr>
				
			<%
			}
			}
			%>				

 	 	
		<aui:layout>
		<select style="display:none"  name="indTotal" id="indTotal"></select>
 	 	<select style="display:none"  name="indFeesName" id="indFeesName"></select>
		<div id="purpose" style="display:none">
		</div>
	  	<aui:column columnWidth="33">
	  		<button  id="printslip" type="button" value="Print" onClick="printpage()" style="display:none"></button>
	  	&nbsp;
	  	</aui:column>
	  	<aui:column columnWidth="33" cssClass="total">
	  		<input name="bttnCompute" type="button" value="Compute Total" onclick="computeTotal();" /> &#8358;
	  	</aui:column>
	  	<aui:column columnWidth="33">
	  		<input id="total" name="total" readonly="readonly" type="text" class="resultbox"></input>
	  	
	  	</aui:column>
	  </aui:layout>
	  
	</div>
</div>	
</form>
<script>

function autoFill(){
try{
		
		var i=0;
		var j=0;
		
		var area_Fixed = document.getElementById('<portlet:namespace/>area_Fixed');
		var unitOfMeasurement = document.getElementById('<portlet:namespace/>unitOfMeasurement');
		var propertyType_Fixed = document.getElementById('<portlet:namespace/>propertyType_Fixed');		
		
		var layout_Fixed = document.getElementById('layout_Fixed');
		for (i = 40200; i <= 1000000; i++){
			var area = document.getElementById('area_' + i);
			var layout=document.getElementById('layout_' + i);
			var propType=document.getElementById('propertyType_' + i);
			
			if (area !=null && area !="" && area_Fixed.value !="" && 
					area_Fixed.value !=null && area_Fixed.value !="0"){
				area.value=area_Fixed.value*unitOfMeasurement.value;	
			}
			if (layout !=null && layout !=""){
				for (j = 0; j <= layout.length-1; j++){
					if (layout.options[j].text==layout_Fixed.value){						
						//layout.value=layout_Fixed.value;
						layout.selectedIndex=j;					
					}	
				}
			}
			if (propType !=null ){
				
				for (j = 0; j <= propType.length-1; j++){
					if (propType.options[j].text==propertyType_Fixed.value){						
						propType.value=propertyType_Fixed.value;
						propType.selectedIndex=j;	
					}
				}
			}
			
	   }//for loop ends here
	   hidePrintButton();
		
	}catch(err){
		alert(err.message);
	}
}
function hidePrintButton()
{
	var printslip = document.getElementById('printslip');
	printslip.style.display="none";
	printslip.innerHTML="Print Slip";
	}

function computeTotal(){
	
	try{
		
		var indTotal = document.getElementById('indTotal');	
		var indFeesName = document.getElementById('indFeesName');
		var purpose = document.getElementById('purpose');	
		indTotal.length=0;
		indFeesName.length=0;
		var i=0;
		var sum=0;
		var totalsum=0;
		var j=0;
		for (i = 40200; i <= 100000; i++){
			var result = document.getElementById('result_' + i);
			var feesName = document.getElementById('feesName_' + i);
			var purposeid = document.getElementById('purpose_' + i);
			
			if (result !=null && result !="" && result.value !="" && 
				result.value !=null && result.value !="0"){
				sum= +parseFloat(result.value);
				totalsum += +sum;
				var indTotalOptions = document.createElement('option'); 
				indTotalOptions.appendChild(document.createTextNode(result.value));
				indTotal.appendChild(indTotalOptions); 
				
				var indFeesOptions = document.createElement('option'); 
				indFeesOptions.appendChild(document.createTextNode(feesName.innerHTML));
				indFeesName.appendChild(indFeesOptions); 
				
				//indTotal.options[i].value=result.value;
				
			}
				if (purposeid !=null && purposeid !="" && j==0){
					
					 purpose.innerHTML=purposeid.options[purposeid.selectedIndex].text;
					 j++;
				 } 
		  }
		var total = document.getElementById('total');
		total.value= parseFloat(totalsum).toMoney() ;
		if (totalsum !=0){
			var printslip = document.getElementById('printslip');
			printslip.style.display="block";
			printslip.innerHTML="Print Slip";
		}
		else{
			hidePrintButton();
		}
	}catch(err){
		alert(err.message);
	}
}
function printpage() {
	try{
		/*window.print();*/
		//var printarea = document.getElementById('printarea');	
		var mywindow = window.open('','popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=no'); 
		mywindow.clear;
		mywindow.document.innerHTML='';
    	mywindow.document.write('<html><head><title>Transaction Calculator Print Out</title>'); 
    /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />'); 
    	mywindow.document.write('</head><body>'); 
    	mywindow.document.write('<h1><b>CRGIA Computed Payment Result </b></h1>');
    	mywindow.document.write('<b>via online Transaction Calculator</b>');
    	
    	var area_Fixed = document.getElementById('<portlet:namespace/>area_Fixed'); 
		var unitOfMeasurement = document.getElementById('<portlet:namespace/>unitOfMeasurement');
		var layout_Fixed = document.getElementById('layout_Fixed');
		
		var selectedCaption = document.getElementById('selectedCaption');
		
		var purpose = document.getElementById('purpose');
		
		if(selectedCaption != null && selectedCaption.innerHTML  != ""){
			mywindow.document.write('<table>');
	    	mywindow.document.write('<tr>');
			mywindow.document.write('<td>');
			mywindow.document.write('<b>Transaction Type:</b>');
			mywindow.document.write('</td>');
	    
			mywindow.document.write('<td>');
			mywindow.document.write('<b>' + selectedCaption.innerHTML + '</b>');
			mywindow.document.write('</td>');
			mywindow.document.write('</tr>');
		}
    	
		
		if(purpose != null && purpose.innerHTML != ""){
			mywindow.document.write('<tr>');
			mywindow.document.write('<td>');
			mywindow.document.write('<b>Purpose:</b>');
			mywindow.document.write('</td>');
	   
			mywindow.document.write('<td>');
			mywindow.document.write('<b>' + purpose.innerHTML + '</b>');
			mywindow.document.write('</td>');
			mywindow.document.write('</tr>');
		}
			
		
    	mywindow.document.write('<tr>');
		mywindow.document.write('<td>');
		mywindow.document.write('<b>Area/Layout:</b>');
		mywindow.document.write('</td>');
		
		mywindow.document.write('<td><b>');
		if(layout_Fixed != null)mywindow.document.write(layout_Fixed.value);
		mywindow.document.write('</b></td>');	    		
		mywindow.document.write('</tr>');
		
		
		
    	mywindow.document.write('<tr>');
		mywindow.document.write('<td>');
		mywindow.document.write('<b>Total Area of Parcel:</b>');
		mywindow.document.write('</td>');
		//alert(unitOfMeasurement.options[unitOfMeasurement.selectedIndex].text);
		mywindow.document.write('<td><b>');
		if(area_Fixed != null) mywindow.document.write(area_Fixed.value + ' ' + unitOfMeasurement.options[unitOfMeasurement.selectedIndex].text);
		mywindow.document.write('</b></td>');	    		
		mywindow.document.write('</tr>');
		
		
		mywindow.document.write('<hr>');
		
    	var i=0;
    	var indTotal = document.getElementById('indTotal');	
    	var total = document.getElementById('total');
    	
    	mywindow.document.write('<tr>');
		mywindow.document.write('<td>');
		mywindow.document.write('<hr>');
		mywindow.document.write('</td>');
		
		mywindow.document.write('<td>');
		mywindow.document.write('<hr>');
		mywindow.document.write('</td>');	    		
		mywindow.document.write('</tr>');
    	
    	mywindow.document.write('<tr>');
		mywindow.document.write('<td>');
		mywindow.document.write('<b>Name of Fees</b>');
		mywindow.document.write('</td>');
		
		mywindow.document.write('<td>');
		mywindow.document.write('<b>Amount</b>(&#8358;)');
		mywindow.document.write('</td>');	    		
		mywindow.document.write('</tr>');
		
		
		
		mywindow.document.write('<tr>');
		mywindow.document.write('<td>');
		mywindow.document.write('<hr>');
		mywindow.document.write('</td>');
		
		mywindow.document.write('<td>');
		mywindow.document.write('<hr>');
		mywindow.document.write('</td>');	    		
		mywindow.document.write('</tr>');
		
	var indFeesName = document.getElementById('indFeesName');
    	 for (i = 0; i <= indFeesName.length-1; i++){
	    		mywindow.document.write('<tr>');
	    		mywindow.document.write('<td>');
	    		mywindow.document.write(indFeesName.options[i].value);
	    		mywindow.document.write('</td>');
	    		
	    		mywindow.document.write('<td>');
	    		var amount=indTotal.options[i].value;
	    		mywindow.document.write(parseFloat(amount).toMoney());
	    		mywindow.document.write('</td>');	    		
	    		mywindow.document.write('</tr>');
    	 }
    	mywindow.document.write('<tr>');
  		mywindow.document.write('<td>');
  		mywindow.document.write('<hr>');
  		mywindow.document.write('</td>');
  		
  		mywindow.document.write('<td>');
  		mywindow.document.write('<hr>');
  		mywindow.document.write('</td>');		
  		mywindow.document.write('</tr>');
  		
    	mywindow.document.write('<tr>');
 		mywindow.document.write('<td>');
 		mywindow.document.write('<h1><b>Total</b></h1>');
 		mywindow.document.write('</td>');
 		mywindow.document.write('<td>');
 		mywindow.document.write('<b>');
		mywindow.document.write('&#8358;' + total.value);
		mywindow.document.write('</b>');
		mywindow.document.write('</td>');	
 		mywindow.document.write('</tr>');
 		
 		mywindow.document.write('<tr>');
  		mywindow.document.write('<td>');
  		mywindow.document.write('<hr>');
  		mywindow.document.write('</td>');
  		mywindow.document.write('<td>');
  		mywindow.document.write('<hr>');
  		mywindow.document.write('</td>');
  		mywindow.document.write('</tr>');
  		mywindow.document.write('<tr>');
  		mywindow.document.write('<td>');
  		mywindow.document.write('<hr>');
  		mywindow.document.write('</td>');
  		mywindow.document.write('<td>');
  		mywindow.document.write('<hr>');
  		mywindow.document.write('</td>');
  		mywindow.document.write('</tr>');
  		
    	mywindow.document.write('</table>');
    	mywindow.document.write('</body></html>'); 
    	mywindow.document.close(); 
    	mywindow.print(); 
    	return true; 
	}catch(err){
		alert(err.message);
	}
}
Number.prototype.toMoney = function(decimals, decimal_sep, thousands_sep) 
{ 
try{
   var n = this, 
   c = isNaN(decimals) ? 2 : Math.abs(decimals), //if decimal is zero we must take it, it means user does not want to show any decimal 
   d = decimal_sep || '.', //if no decimal separetor is passed we use the comma as default decimal separator (we MUST use a decimal separator) 
 
   /* 
   according to [http://stackoverflow.com/questions/411352/how-best-to-determine-if-an-argument-is-not-sent-to-the-javascript-function] 
   the fastest way to check for not defined parameter is to use typeof value === 'undefined'  
   rather than doing value === undefined. 
   */    
   t = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep, //if you don't want ot use a thousands separator you can pass empty string as thousands_sep value 
 
   sign = (n < 0) ? '-' : '', 
 
   //extracting the absolute value of the integer part of the number and converting to string 
   i = parseInt(n = Math.abs(n).toFixed(c)) + '',  
 
   j = ((j = i.length) > 3) ? j % 3 : 0;  
   return sign + (j ? i.substr(0, j) + t : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : '');  
}catch(err){
	alert(err.message);
}
} 

</script>
